<template>
  <div class="second">
    <div class="dati">
      <van-nav-bar
        title="调查问卷"
        left-text="返回"
        @click-left="toReturn()"
      />
      <div v-for="(question, index) in list" :key="question.questionId" >
        <div class="test-content" v-if="index == page">
          <!--题号+题目-->
          <div class="content-title">{{ index + 1 }}.{{ question.question}}</div>
          <!--四个选项-->
          <van-radio-group v-model="radio">

            <van-radio name="A" class="text-x" >{{question.optiona}}</van-radio>

            <van-radio name="B " class="text-x">{{question.optionb}}</van-radio>

            <van-radio name="C" class="text-x">{{question.optionc}}</van-radio>

          </van-radio-group>
          <!--进入下一题-->
          <div class="btn">
            <div class="next" @click="toNext(index, question.questionId)" v-if="isShow" >
              <span class="spa">下一题</span>
            </div>
            <!-- 提交 -->
            <div class="tijiao" v-if="!isShow" @click="over">
              <span class="spa"> 完成答题</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "question.vue",
  data() {
    return {
      list:[],
      page:0,
      radio: '',
      isShow:true,
      result:[]
    }
  },
  mounted() {
    this.getQuestion();
  },
  methods: {
    getQuestion(){
      this.$axios.post("http://localhost:7000/question/findAllQuestion").then(res => {
        this.list=res.data.data;
      })
    },
    toNext(index,id){
      this.result.push(this.radio)
      this.radio='';
      index++;
      this.page++;
      if(this.page == this.list.length-1) {
        Toast("获得8个积分");
        return this.isShow = false;
      } else {
        return this.isShow = true
      }
      console.log(this.result);
    },
    toReturn(){
      this.$router.push('/a4');
    },
    over(){
      this.$router.push('/a4');
    }
  }
}
</script>

<style scoped>

</style>
